<template>
  <div class="dashboard">
    <!-- 顶部标题 -->
    <DashboardHeader title="广东省数据监控大屏" />

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧区域 -->
      <div class="left-panel">
        <!-- 指标信息区域 -->
        <StatsContainer title="关键指标" :data="statsData1" />

        <!-- 图表区域1 -->
        <ChartContainer title="经济指标趋势" :options="lineChartOptions" />

        <!-- 图表区域2 -->
        <ChartContainer title="产业结构分布" :options="pieChartOptions" />
      </div>

      <!-- 中间区域 -->
      <div class="center-panel">
        <!-- 地图区域 (70%) -->
        <MapContainer 
          :initial-map-level="'province'"
          :initial-map-name="'广东省'"
          @map-level-change="handleMapLevelChange"
          @city-change="handleCityChange"
        />

        <!-- 滚动数据表区域 (30%) -->
        <DataTable title="实时数据监控" :data="tableData" />
      </div>

      <!-- 右侧区域 -->
      <div class="right-panel">
        <!-- 指标信息区域 -->
        <StatsContainer title="经济指标" :data="statsData2" />

        <!-- 图表区域1 -->
        <ChartContainer title="城市GDP排名" :options="barChartOptions" />

        <!-- 图表区域2 -->
        <ChartContainer title="人口统计" :options="gaugeChartOptions" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import DashboardHeader from '@/components/common/DashboardHeader.vue'
import StatsContainer from '@/components/common/StatsContainer.vue'
import ChartContainer from '@/components/common/ChartContainer.vue'
import MapContainer from '@/components/common/MapContainer.vue'
import DataTable from '@/components/common/DataTable.vue'
import { statsData1, statsData2, tableData } from '@/data/mockData'
import {
  generateMockData,
  getLineChartOption,
  getPieChartOption,
  getBarChartOption,
  getGaugeChartOption,
} from '@/utils/chartOptions'

// 图表配置 - 在组件创建时立即初始化
const mockData = generateMockData()
const lineChartOptions = ref(getLineChartOption(mockData))
const pieChartOptions = ref(getPieChartOption(mockData))
const barChartOptions = ref(getBarChartOption(mockData))
const gaugeChartOptions = ref(getGaugeChartOption())

// 地图事件处理
const handleMapLevelChange = (level: 'province' | 'city') => {
  console.log('地图层级变化:', level)
}

const handleCityChange = (cityName: string) => {
  console.log('城市变化:', cityName)
}
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0a1929 0%, #1e3a5f 100%);
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

.main-content {
  display: flex;
  height: 100%;
  padding-top: 60px;
}

.left-panel,
.right-panel {
  width: 25%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-panel {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .left-panel,
  .right-panel {
    width: 30%;
  }
  .center-panel {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  .left-panel,
  .right-panel,
  .center-panel {
    width: 100%;
  }
}
</style>